<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>原生的ajax请求</title>
  </head>
  <body>
    <button onclick="sendGet()">测试发送get请求</button>
    <button onclick="sendPost1()">测试发送post请求1</button>
    <button onclick="sendPost2()">测试发送post请求2</button>

    <script>
      function sendGet() {
        //   直接使用原生
        // 1. 实例化一个对象 xhr
        const xhr = new XMLHttpRequest()
        //   2. open一个地址(类型,地址)
        xhr.open("GET", "http://toutiao.itheima.net/v1_0/channels") // open两个参数  地址 类型
        //   3. 监听返回的数据结构
        xhr.addEventListener("load", function () {
          // 监听load事件
          console.log("数据进行了响应", xhr.response)
          // 如何将json字符串转化成对象
          const data = JSON.parse(xhr.response)
        })
        //   4.发送请求
        xhr.send() // 发送请求
      }
    </script>
    <script>
      function sendPost1() {
        // 1. 实例化一个对象 xhr
        const xhr = new XMLHttpRequest()
        //   2. open一个地址(类型,地址)
        xhr.open("POST", "http://www.liulongbin.top:3006/api/post") // open两个参数  地址 类型
        //   3. 监听返回的数据结构
        xhr.addEventListener("load", function () {
          // 监听load事件
          console.log("数据进行了响应", xhr.response)
          // 如何将json字符串转化成对象
          const data = JSON.parse(xhr.response)
        })
        // 设置一下参数类型  axios(第三方的数据)
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
        //   4.发送请求
        xhr.send("username=zhangsan&password=123") // 发送请求
      }
      function sendPost2() {
        // 1. 实例化一个对象 xhr
        const xhr = new XMLHttpRequest()
        //   2. open一个地址(类型,地址)
        xhr.open("POST", "http://www.liulongbin.top:3006/api/post") // open两个参数  地址 类型
        //   3. 监听返回的数据结构
        xhr.addEventListener("load", function () {
          // 监听load事件
          console.log("数据进行了响应", xhr.response)
          // 如何将json字符串转化成对象
          const data = JSON.parse(xhr.response)
        })
        // 设置一下参数类型  axios(第三方的数据)
        xhr.setRequestHeader("Content-Type", "application/json")
        //   4.发送请求
        const obj = {
          username: "张三",
          password: "李四",
        }

        xhr.send(JSON.stringify(obj)) // 发送请求
      }
    </script>
  </body>
</html>
